<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户管理 </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="page">
    
      <div class="page-content d-flex align-items-stretch" > 
        <!-- Side Navbar -->
        
        <div class="content-inner" style="width:100%;">
          <!-- Page Header-->
         	<header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom"><span class="icon-user">&nbsp;&nbsp;&nbsp;&nbsp;</span><i>用户管理</i></h2>
            </div>
          </header>
          <!-- Dashboard Counts Section-->
          
          <!-- 搜索区域-->
         <section class="dashboard-counts no-margin-top " style="margin-left: 13px;padding-top: 10px;">
         	<div class="input-group col-lg-4 float-left" >
              <div class="input-group-prepend">
                <button id="searchText"  data-toggle="dropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false">用户名 <span class="caret"></span></button>
                <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
                	<a onclick="$('#searchType').val('1');$('#searchText').html($(this).text())"  class="dropdown-item">用户名</a>
                	<a onclick="$('#searchType').val('2');$('#searchText').html($(this).text())"  class="dropdown-item">用户id</a>
                  <div class="dropdown-divider"></div>
                  <a href="#" class="dropdown-item" hidden>Separated link</a>
                </div>
              </div>
              <input id="searchType" name="searchType" type="text" class="form-control" style="display: none;" value="1">
              <input id="searchContent" name="searchContent" type="text" class="form-control">
              <div class="input-group-append">
                <button id="searchBtn" type="button" class="btn btn-primary">Go!</button>
              </div>
              
            </div>
           
            
            
            
            
         </section>
          <!-- Projects Section-->
          <section class="projects no-padding-top no-padding-bottom">
            <div class="container-fluid" style="min-height: 500px;">
              <!-- Project-->
              <div class="project" id="projectId1">
                <div class="row bg-white has-shadow">
                  <div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
                    <div class="project-title d-flex align-items-center">
                      <div class="image has-shadow"><img src="img/project-1.jpg" alt="..." class="img-fluid"></div>
                      <div class="text">
                        <h3 class="h4">用户名</h3><small>用户id 0021889542</small>
                      </div>
                    </div>
                    <div class="project-date"><span class="hidden-sm-down"><i class="fa fa-clock-o"> &nbsp;&nbsp;&nbsp;</i>角色</span></div>
                  </div>
                  <div class="right-col col-lg-6 d-flex align-items-center ">
                    <div class="time isValid">是否有效 </div>
                    
                    <!--占位块  分隔操作按钮-->
                    <div class="col-lg-1"></div>
                    <div class="CTAs">

                    	
											
											<li class="nav-item dropdown float-left" style="list-style: none;margin-left: 10px;">
			                  <a class="btn btn-primary viewUser" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fasle" style="background-color: #FFEEBA;border: none;">查看</a>
			                 
			                  <ul aria-labelledby="notifications" class="dropdown-menu " style="display: none;min-height: 200px;width: auto;max-width: 480px;overflow: hidden;">
			                  
			                  
			                  <li >
			                  	<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
			                  		<label class="col-sm-4 form-control-label float-left">用户名</label>
			                  		<div class="col-md-8 float-left">
			                  			<label class="col-md-8 form-control-label float-left font-weight-bold">张三</label>
			                  		</div>
			                  	</div>
			                  	<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
		                    </li>
		                    <li>
		                    	<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
		                    		<label class="col-sm-4 form-control-label float-left">当前状态</label>
		                    		<div class="col-md-8 float-left">
		                    			<label class="col-md-8 form-control-label float-left font-weight-bold">可用</label>
		                    		</div>
		                    	</div>
		                    	<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
		                    </li>
		                    <li>
		                    	<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
		                    		<label class="col-sm-4 form-control-label float-left">部门</label>
		                    		<div class="col-md-8 float-left">
		                    			<label class="col-md-8 form-control-label float-left font-weight-bold">XX部</label>
		                    		</div>
		                    	</div>
		                    	<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
		                    </li>
		                    <li>
		                    	<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
		                    		<label class="col-sm-4 form-control-label float-left">联系方式</label>
		                    		<div class="col-md-8 float-left">
		                    			<label class="col-md-8 form-control-label float-left font-weight-bold">132 6655 4488</label>
		                    		</div>
		                    	</div>
		                    	<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
		                    </li>
		                    <li>
		                    	<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
		                    		<label class="col-sm-4 form-control-label float-left">邮箱</label>
		                    		<div class="col-md-8 float-left">
		                    			<label class="col-md-8 form-control-label float-left font-weight-bold">zhangsan@163.com</label>
		                    		</div>
		                    	</div>
		                    	<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
		                    </li>
			                
			                  </ul>
			                </li>
			                <li class="nav-item dropdown float-left" style="list-style: none;margin-left: 10px;">
			                  <a class="btn btn-primary modifyUser" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fasle"  style="background-color: #33ccff;border: none;">修改 </a>
	                    	
			                  <ul aria-labelledby="notifications" class="dropdown-menu" style="display: none;">
			                  	<li>
			                  		<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
			                  			<label class="col-sm-4 form-control-label float-left">用户名</label>
			                  			<div class="col-md-8 float-left">
			                  				<input type="text" class="col-md-8 form-control-label float-left font-weight-bold" value="张三"></input>
			                  			</div>
			                  		</div>
			                  		<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
			                  	</li>
			                  	
			                  	<li>
			                  		<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
			                  			<label class="col-sm-4 form-control-label float-left">部门</label>
			                  			<div class="col-md-8 float-left">
			                  				<input type="text" class="col-md-8 form-control-label float-left font-weight-bold"></input>
			                  			</div>
			                  		</div>
			                  		<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
			                  	</li>
			                  	<li>
			                  		<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
			                  			<label class="col-sm-4 form-control-label float-left">联系方式</label>
			                  			<div class="col-md-8 float-left">
			                  				<input type="tel" class="col-md-8 form-control-label float-left font-weight-bold"></input>
			                  			</div>
			                  		</div>
			                  		<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
			                  	</li>
			                  	<li>
			                  		<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
			                  			<label class="col-sm-4 form-control-label float-left">邮箱</label>
			                  			<div class="col-md-8 float-left">
			                  				<input class="col-md-8  float-left " value="zhangsan@163.com"></input>
			                  			</div>
			                  		</div>
			                  		<div style="height: 1px;border-bottom: 1px dashed #eee;margin-top: 0px;width: 80%;margin-left: 10%;"></div>
			                  	</li>
			                  	<li>
			                  		<div class="form-group row no-padding" style="min-width: 300px;line-height: 20px;">
			                  			<a class="btn btn-primary disableUser"  style="background-color: #eee;border: none;margin-left: 30%;">确认修改</a>
			                  			
			                  		</div>
			                  	</li>
			                  	
			                  </ul>
			                </li>
			                <a class="btn btn-primary disableUser"  style="background-color: #33ff66;border: none;margin-left: 10px;">停用</a>
											<a class="btn btn-primary enableUser"    style="background-color: #33ff66;border: none;margin-left: 10px;">启用</a>
											<a class="btn btn-primary bg-danger delUser"   style="border: none;margin-left: 10px;">删除</a>
			                
			                
											
											
                    	
                    </div>
                  </div>
                </div>
              </div>
              <!-- Project-->
              
              
              
              
              <!--用户列表结束
              -->
            </div>
            
            <div class="project no-padding-bottom">
            	<div class="row bg-white has-shadow">
            		<div class="left-col col-lg-12 d-flex align-items-center justify-content-between " >
            			<div class=" col-lg-10 " >
            				<div class="col-lg-1"></div>
            					<span class="col-sm-2 float-left " style="width: auto;font-size: 0.9em;margin-top: 4px;" >每页<input id="pageSize" name="pageSize" value="20" maxlength="2" style="width: 20px;margin-left: 8px;margin-right: 8px;"/>条
            					</span>
	                    <div class="CTAs float-left" style="margin-left: 8px;" >
	                    	<a id="lastPage" class="btn btn-primary  " style="background-color: #eeeeee;border: none;"><</a>
	                    	<a id="backward" class="btn btn-primary  "  style="background-color: #eeeeee;border: none;"><<</a>
	                    	<span id="pageBox" class="pageBox" >
		                    	
	                    	</span>
	                    	<a id="forward" class="btn btn-primary "  style="background-color: #eeeeee;border: none;">>></a>
	                    	<a id="nextPage" class="btn btn-primary" style="background-color: #eeeeee;border: none;">></a>
	                    </div>
	                    <span class="col-sm-2 float-left " style="width: auto;font-size: 0.9em;margin-top: 4px;" >共<i id="totalPage" name="totalPage" type="text" maxlength="2" style="width: 20px;margin-left: 8px;margin-right: 8px;">10</i>页
            					</span>
                  	</div>
            			</div>
            			
            		</div>
            	</div>
            </div>
          </section>
     
        
          <!-- Page Footer-->
          
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="js/charts-home.js"></script>
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script src="js/pageinit.js"></script>
    <script type="text/javascript">
    	
    		//绑定搜索按钮点击事件
    		$("#searchBtn").bind("click",function(){
    			var value = $("#searchContent").val();
    			var searchType = $("#searchType").val();
    			
    			doSearch(searchType, value);
    			
    		});
    		
    		/*
    	 搜索事件
    	 * */
    	function doSearch(searchType, value){
    		var starttime = $("#starttime").val();
    		var endTime = $("#endtime").val();
    			if(starttime ==undefined){
    				starttime = 0;
    				endTime = 0;
    			}
    			if(value == ""){
    				return;
    			}
    			alert("go search "+searchType+value+starttime+endTime);
    			
    	}
    	
    	function bindDisableUserBtn(){
    		$(".disableUser").unbind("click");
    		$(".disableUser").bind("click",function(){
    			var userid = $(this).parent().parent().parent().parent().attr("id");
    			if(confirm("确认停用用户"+userid+"吗")){
    				$(this).parent().parent().find(".isValid").text("停用");
	    			$(this).parent().parent().find(".isValid").attr('style','color:red;');
	    			$(this).text("启用");
	    			$(this).removeAttr("class","btn btn-primary disableUser");
	    			$(this).attr("class","btn btn-primary enableUser");
    				bindEnableUserBtn();
    				disabledUser(userid);
    			}
    			
    		});
 
    	}
    	
    	
    	function bindEnableUserBtn(){
    		$(".enableUser").unbind("click");
    		$(".enableUser").bind("click",function(){
    			var userid = $(this).parent().parent().parent().parent().attr("id");
    			if(confirm("确认启用用户"+userid+"吗")){
	    			$(this).parent().parent().find(".isValid").text("启用");
	    			$(this).parent().parent().find(".isValid").attr('style','color:#00EE00;');
	    			$(this).text("停用");
	    			$(this).removeAttr("class","btn btn-primary enableUser");
	    			$(this).attr("class","btn btn-primary disableUser");
	    			bindDisableUserBtn();
	    			enableUser(userid);
    			}
    		});
    	}
    		bindDisableUserBtn();
    		bindEnableUserBtn();
    		
    		
    		function disabledUser(userid){
    			alert(userid+"已停用");
    		}
    		function enableUser(userid){
    			alert(userid+"已启用");
    		}
    </script>
  </body>
</html>